<head>
    <link rel="stylesheet" href="css.css">
</head>

<script>
    var digitSegments = [
        [1, 2, 3, 4, 5, 6],
        [2, 3],
        [1, 2, 7, 5, 4],
        [1, 2, 7, 3, 4],
        [6, 7, 2, 3],
        [1, 6, 7, 3, 4],
        [1, 6, 5, 4, 3, 7],
        [1, 2, 3],
        [1, 2, 3, 4, 5, 6, 7],
        [1, 2, 7, 3, 6]
    ]

    document.addEventListener('DOMContentLoaded', function() {
        var _hours = document.querySelectorAll('.hours');
        var _minutes = document.querySelectorAll('.minutes');
        var _seconds = document.querySelectorAll('.seconds');

        setInterval(function() {
            var date = new Date();
            var hours = date.getHours(),
                minutes = date.getMinutes(),
                seconds = date.getSeconds();

            setNumber(_hours[0], Math.floor(hours / 10), 1);
            setNumber(_hours[1], hours % 10, 1);

            setNumber(_minutes[0], Math.floor(minutes / 10), 1);
            setNumber(_minutes[1], minutes % 10, 1);

            setNumber(_seconds[0], Math.floor(seconds / 10), 1);
            setNumber(_seconds[1], seconds % 10, 1);
        }, 1000);
    });

    var setNumber = function(digit, number, on) {
        var segments = digit.querySelectorAll('.segment');
        var current = parseInt(digit.getAttribute('data-value'));

        // only switch if number has changed or wasn't set
        if (!isNaN(current) && current != number) {
            // unset previous number
            digitSegments[current].forEach(function(digitSegment, index) {
                setTimeout(function() {
                    segments[digitSegment - 1].classList.remove('on');
                }, index * 45)
            });
        }

        if (isNaN(current) || current != number) {
            // set new number after
            setTimeout(function() {
                digitSegments[number].forEach(function(digitSegment, index) {
                    setTimeout(function() {
                        segments[digitSegment - 1].classList.add('on');
                    }, index * 45)
                });
            }, 250);
            digit.setAttribute('data-value', number);
        }
    }
</script>

<style>

    @import url('https://fonts.googleapis.com/css?family=Roboto:300');

    html,
    body {
        margin: 0;
        padding: 0;
        background: #000;
        width: 100%;
        height: 100%;
        position: absolute;
        min-width: 900px;
    }
    
    .calendar {
        color: #ff0000;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0%;
        padding: 0%;
    }

    .time {
        opacity: 0;
        font-family: 'Roboto', sans-serif;
        text-shadow: 0 0 50px rgba(255, 0, 0, 0.7);
        left: 50%;
        top: 50%;
        height: 50px;
        width: 100%;
        margin-top: 50px;
        text-align: center;
    }

    .date {
        opacity: 1;
        transition: opacity 0s;
        -webkit-transition: opacity 0s;
        -ms-transition: opacity 0s;
        -moz-transition: opacity 0s;
        -o-transition: opacity 0s;
    }

    .clock {
        height: 200px;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 900px;
        margin-left: -450px;
        margin-top: -100px;
        text-align: center;
    }
    
    .digit {
        width: 120px;
        height: 200px;
        margin: 0 5px;
        position: relative;
        display: inline-block;
    }
    
    .digit .segment {
        background: #e5e5e5;
        border-radius: 5px;
        position: absolute;
        opacity: 0;
        transition: opacity 0.2s;
        -webkit-transition: opacity 0.2s;
        -ms-transition: opacity 0.2s;
        -moz-transition: opacity 0.2s;
        -o-transition: opacity 0.2s;
    }
    
    .minutes .segment {
        background: #ff0000;
        border-radius: 5px;
        position: absolute;
        opacity: 0;
        transition: opacity 0.2s;
        -webkit-transition: opacity 0.2s;
        -ms-transition: opacity 0.2s;
        -moz-transition: opacity 0.2s;
        -o-transition: opacity 0.2s;
    }
    
    .seconds .segment {
        background: #e5e5e5;
        border-radius: 5px;
        position: absolute;
        opacity: 0;
        transition: opacity 0.2s;
        -webkit-transition: opacity 0.2s;
        -ms-transition: opacity 0.2s;
        -moz-transition: opacity 0.2s;
        -o-transition: opacity 0.2s;
    }
    
    .digit .segment.on {
        opacity: 1;
        box-shadow: 0 0 100px rgba(229, 229, 229, 0.7);
        transition: opacity 0s;
        -webkit-transition: opacity 0s;
        -ms-transition: opacity 0s;
        -moz-transition: opacity 0s;
        -o-transition: opacity 0s;
    }
    
    .separator {
        opacity: 0;
        box-shadow: 0 0 100px rgba(229, 229, 229, 0.7);
        transition: opacity 0s;
        -webkit-transition: opacity 0s;
        -ms-transition: opacity 0s;
        -moz-transition: opacity 0s;
        -o-transition: opacity 0s;
    }
    
    .minutes .segment.on {
        opacity: 1;
        box-shadow: 0 0 100px rgba(255, 0, 0, 0.7);
        transition: opacity 0s;
        -webkit-transition: opacity 0s;
        -ms-transition: opacity 0s;
        -moz-transition: opacity 0s;
        -o-transition: opacity 0s;
    }
    
    .seconds .segment.on {
        opacity: 1;
        box-shadow: 0 0 100px rgba(229, 229, 229, 0.7);
        transition: opacity 0s;
        -webkit-transition: opacity 0s;
        -ms-transition: opacity 0s;
        -moz-transition: opacity 0s;
        -o-transition: opacity 0s;
    }
    
    .separator {
        opacity: 0;
        width: 20px;
        height: 20px;
        background: #FFf;
        border-radius: 50%;
        display: inline-block;
        position: relative;
        top: -90px;
    }
    
    .digit .segment:nth-child(1) {
        top: 10px;
        left: 20px;
        right: 20px;
        height: 10px;
    }
    
    .digit .segment:nth-child(2) {
        top: 20px;
        right: 10px;
        width: 10px;
        height: 75px;
        height: calc(50% - 25px);
    }
    
    .digit .segment:nth-child(3) {
        bottom: 20px;
        right: 10px;
        width: 10px;
        height: 75px;
        height: calc(50% - 25px);
    }
    
    .digit .segment:nth-child(4) {
        bottom: 10px;
        right: 20px;
        height: 10px;
        left: 20px;
    }
    
    .digit .segment:nth-child(5) {
        bottom: 20px;
        left: 10px;
        width: 10px;
        height: 75px;
        height: calc(50% - 25px);
    }
    
    .digit .segment:nth-child(6) {
        top: 20px;
        left: 10px;
        width: 10px;
        height: 75px;
        height: calc(50% - 25px);
    }
    
    .digit .segment:nth-child(7) {
        bottom: 95px;
        bottom: calc(50% - 5px);
        right: 20px;
        left: 20px;
        height: 10px;
    }
    
    body {
        background-color: #1a1a1a;
        //background-image: -webkit-radial-gradient(top, circle cover, #3c3b52 0%, #252233 0%);
        //background-image: -moz-radial-gradient(top, circle cover, #3c3b52 0%, #252233 0%);
        //background-image: -o-radial-gradient(top, circle cover, #3c3b52 0%, #252233 0%);
       // background-image: radial-gradient(circle cover at top, #3c3b52 0%, #252233 0%);
    }

</style>
     
<body onload="load()">
    
    <div class="calendar">
        <div class="time">
            <!span id="clock"><!/span><br>
            <span id="date">Wednesday, August 1, 2017</span>
        </div>

        <div class="clock">
            <div class="digit hours">
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
            </div>
        
            <div class="digit hours">
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
            </div>
        
            <div class="separator"></div>
        
            <div class="digit minutes">
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
            </div>
        
            <div class="digit minutes">
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
            </div>
        
            <div class="separator"></div>
        
            <!div class="digit seconds">
                <!div class="segment"></div>
                <!div class="segment"></div>
                <!div class="segment"></div>
                <!div class="segment"></div>
                <!div class="segment"></div>
                <!div class="segment"></div>
                <!div class="segment"></div>
            </div>
        
            <!div class="digit seconds">
                <!div class="segment"></div>
                <!div class="segment"></div>
                <!div class="segment"></div>
                <!div class="segment"></div>
                <!div class="segment"></div>
                <!div class="segment"></div>
                <!div class="segment"></div>
            </div>
        </div>
    </div>
     
    <div id="background"></div>
     
    <script src="js.js"></script>
</body>